<template>
  <div v-loading="this.$store.state.logoing" class="dashboard-container">
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <tree-cool :data="titleData" @toggel-box="isShow" />
      <!-- 这是树 -->
      <el-tree :data="departs" :props="defaultProps">
        <template #default="{data}">
          <tree-cool :data="data" @toggel-box="isShow" @upDateLoad="upDateLoad" />
        </template>
      </el-tree>
    </el-card>
    <!--  add弹窗  -->
    <add-dept :is-show-dept.sync="isShowDept" :bumen-id="bumenID" :dlist="dlist" :add-dept-type="AddDeptType" @upDateLoad="upDateLoad" />
  </div>
</template>

<script>
import TreeCool from './component/TreeCool.vue'
import { getDepartmentsListAPI } from '@/api/departments'
import AddDept from './component/AddDept.vue'
export default {
  components: {
    TreeCool,
    AddDept
  },
  data () {
    return {
      // 部门id
      bumenID: '',
      // 弹窗真假
      isShowDept: false,
      AddDeptType: 'add',
      titleData: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        root: true,
        id: ''
      },
      // 列表数据
      departs: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      yyzData: {},
      dlist: []
    }
  },
  created () {
    // 调用获取菜单数据
    this.getDepartmentsListData()
  },
  methods: {
    // 获取菜单数据
    async getDepartmentsListData () {
      // 调用接口
      const DepartmentsList = await getDepartmentsListAPI()
      // titleData 标题 赋值
      this.titleData.name = DepartmentsList.data.companyName
      // 数据删选子菜单后赋值
      this.departs = this.FilterNodesToDeParts(DepartmentsList.data.depts, '')
      // 获取原始数据用于筛选
      this.dlist = DepartmentsList.data.depts
    },
    upDateLoad () {
      this.getDepartmentsListData()
    },
    // 筛选子菜单
    FilterNodesToDeParts (list, pid) {
      const arr = []
      // console.log(list.data.depts)
      list.forEach(item => {
        if (item.pid === pid) {
          // 当有子才单的时候 判断子菜单是否有子菜单
          const children = this.FilterNodesToDeParts(list, item.id)
          // 判断是否有子菜单
          if (children && children.length > 0) {
            item.children = children
          }
          // 添加到数组
          arr.push(item)
        }
      })
      // 把一个删选好的数组返回去
      return arr
    },
    // 弹窗
    isShow (e) {
      this.isShowDept = e.isShow
      this.bumenID = e.pid
      this.AddDeptType = e.type
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>
